{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<div id="tip_modal"><form class="layui-form p-4">
    <h3 class="pb-3">功能菜单/节点</h3>
    <table class="layui-table layui-table-form">
        <tr>
            <td class="layui-td-gray">父件<font>*</font>
            </td>
            <td>
                <select name="material_dossier_id" lay-filter="materRial" id="materRial" lay-verify="" lay-search>
                    <option value="" title="">请选择</option>
                    {volist name='materialList' id='ml'}
                    <option value="{$ml.id}" title="{$ml.specs}"} {if isset($detail.material_dossier_id) &&$detail.material_dossier_id==$ml.id} selected {/if}>{$ml.name}</option>
                    {/volist}
                </select>
            </td>
            <td class="layui-td-gray">规格型号
            </td>
            <td>
                <span id="spces">{$detail.specs|default=''}</span>
            </td>
        </tr>


        <tr>
            <td class="layui-td-gray">是否默认<font>*</font>
            </td>
            <td>
                <select name="is_default" >
                    {foreach ['是','否'] as $de}
                    <option value="{$de}" {if isset($detail.is_default)&&$detail.is_default==$de } selected {/if}>{$de}</option>
                    {/foreach}
                </select>
            </td>
            <td class="layui-td-gray">状态<font>*</font>
            </td>
            <td>
                <select name="status" >
                    {foreach [['id'=>1,'name'=>'启用'],['id'=>2,'name'=>'禁用']] as $st}
                    <option value="{$st.id}" {if isset($detail.status)&&$detail.status==$st.id } selected {/if}>{$st.name}</option>
                    {/foreach}
                </select>

            </td>

        </tr>
        <tr><td colspan="6"><h3>子件明细</h3></td></tr>
        <tr><td colspan="6"><a href="javascript:"  data-modal="{:url('addMx')}" class="layui-btn layui-btn-primary">选择子件</a></td></tr>
        <table class="layui-table tableMany">
            <thead>
            <tr>
                <th>序号</th>
                <th>子件编码</th>
                <th>子件名称</th>
                <th>规格型号</th>
                <th>BomID</th>
                <th>额定数量</th>
                <th>损耗率(%)</th>
                <th>操作 </th>
            </tr>
            </thead>
            {if isset($mxList)}
            <tbody id="mxTbdy">
            {volist name='mxList' id='ml' key='k'}
            <tr>
                <td><span class="xuhao">{$k}</span>
                    <input type="hidden" name="mxid[]" value="{$ml.id}">
                    <input type="hidden" name="material_id[]" value="{$ml.material_dossier_id}"></td>
                <td>{$ml.bar_code}</td>
                <td>{$ml.name}</td>
                <td>{$ml.specs}</td>
                <td>
                    <select name="bom_id[]">\n" +
                        <option value="0">请选择</option>
                        {volist name='bomList' id='bl'}
                        <option value="{$bl.id}" {if $ml.bom_id == $bl.id} selected {/if}>{$bl.id}</option>
                        {/volist}
                    </select>
                </td>
                <td><input type="text" value="{$ml.num}" class="layui-input " maxlength='9' required lay-verify="required" onkeyup="digitalFiltering(this,2)" placeholder="请输入数量" autocomplete="off" min="0" max="999999" name="num[]"></td>
                <td><input type="text" class="layui-input " maxlength='9' required lay-verify="required" value="{$ml.loss_rate}" onkeyup="digitalFiltering(this,4)" placeholder="请输入损耗率" autocomplete="off" min="0" max="999999" name="loss_rate[]"></td>
                <td> <a href="javascript:" class="layui-btn layui-btn-xs layui-btn-danger" onclick="delMx('{$ml.id}',this)">删除</a></td>
            </tr>
            {/volist}
            </tbody>
            {else}
            <tbody id="mxTbdy">

            </tbody>
            {/if}

        </table>
    </table>
    <div class="py-3">
        <input type="hidden" name="id" value="{$id}">
        <button class="layui-btn layui-btn-normal" type="button" id="sub" lay-submit="" lay-filter="webform1">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form></div>

{/block}
<!-- /主体 -->
{block name="script"}
<script>

    const moduleInit = ['tool'];

    let isSub=2;
    function gouguInit() {
        var form = layui.form, tool = layui.tool;
        //监听提交
        form.on('submit(webform1)', function (data) {
            let callback = function (e) {
                isSub=2;
                layer.msg(e.msg);
                if (e.code == 0) {
                    setTimeout(function () {
                        parent.parent.location.reload();
                    }, 1000);
                }
            }
            if (isSub==2){
                isSub=1
                tool.post("/home/BomForm/add", data.field, callback);
            }
            return false;
        });

        // layui.use(['form'], function () {
        //     var form = layui.form;
        //     form.render();
        // });
        form.on('select(materRial)', function (data) {
            var selectedTitle = '';
            $('#materRial option').each(function(){
                if($(this).val() == data.value){
                    selectedTitle = $(this).attr('title');
                }
            });
            console.log('ttt',selectedTitle)
            $('#spces').text(selectedTitle)
        }); // select(lay-filter属性的值)
        //弹窗
        var treeTable = layui.table, tool = layui.tool,form = layui.form;
        var tableIns = treeTable.render({
            elem: '#mxTable'
            , url: "{:url('addMx')}"
            ,method:'post'
            ,toolbar: '#toolbarDemo',
            defaultToolbar:[]
            , cellMinWidth: 80
            , cols: [[
                {type: 'checkbox', fixed: 'left' },
                {fixed: 'left',field: 'id',title: 'ID' ,unresize: true,hide:true},
                {field: 'mdId', width: 80, title: 'ID号', align: 'center'}
                , {field: 'specs',  title: '规格型号'}
                , {field: 'mdName',  title: '名称'}
                , {field: 'bar_code',  title: '编码'}
                // , {field: 'warehouseName',  title: '仓库'}
            ]]
            , page: true
        });
        //监听搜索提交
        form.on('submit(webform)', function (data) {
            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });
        //表头工具栏事件
        treeTable.on('toolbar(mxTable)', function(obj){
            var checkStatus = treeTable.checkStatus(obj.config.id);
            console.log(checkStatus)
            switch(obj.event){
                case 'add':
                    break;
                case 'subt':
                    var data = checkStatus.data;
                    var ids=[]
                    if (data.length){
                        data.forEach(function (value,index) {
                            ids.push(value)
                        })
                        saveAddMx(ids)
                        layer.close(layTip)

                    }else {
                        layer.msg('请选择数据');
                    }

                    break;
                case 'import':

                    break;

            };
        })
    }
</script>
<script>
    function saveAddMx(ojb) {
        var lastListItem = $('.tableMany tr:last');
        let aa=$(lastListItem).find(".xuhao")
        let len=$(aa).text()
        console.log('leng:',len)
        if (!parseInt(len)){
            len=0;
        }
        let index=parseInt(len)+1;
        let str='';
        for (var i=0;i<ojb.length;i++){
            str+="  <tr>\n" +
                "                <td> <span class=\"xuhao\">"+index+"</span> <input type=\"hidden\" name=\"mxid[]\" value=\"\"><input type=\"hidden\" name=\"material_id[]\" value=\""+ojb[i].mdId+"\"></td>\n" +
                "                <td> "+ojb[i].bar_code+" </td>\n" +
                "                <td> "+ojb[i].mdName+" </td>\n" +
                "                <td>"+ojb[i].specs+" </td>\n" +
                "                <td>\n" +
                "                    <select name=\"bom_id[]\">\n" +
                "                        <option value=\"0\">请选择</option>\n" +
                "                        {volist name='bomList' id='bl'}\n" +
                "                        <option value=\"{$bl.id}\">{$bl.id}</option>\n" +
                "                        {/volist}\n" +
                "                    </select>\n" +
                "                </td>\n" +
                "                <td>\n" +
                "                    <input type=\"text\" class=\"layui-input \" maxlength='9' required lay-verify=\"required\" onkeyup=\"digitalFiltering(this,2)\" placeholder=\"请输入数量\" autocomplete=\"off\" min=\"0\" max=\"999999\" name=\"num[]\">\n" +
                "                </td>\n" +
                "                <td>\n" +
                "                    <input type=\"text\" class=\"layui-input \" maxlength='9' required lay-verify=\"required\" onkeyup=\"digitalFiltering(this,4)\" placeholder=\"请输入损耗率\" autocomplete=\"off\" min=\"0\" max=\"999999\" name=\"loss_rate[]\">\n" +
                "                </td>\n" +
                "                <td>\n" +
                "                    <a href=\"javascript:\" class='layui-btn layui-btn-danger layui-btn-xs' onclick='removetr(this)'>删除</a>\n" +
                "                </td>\n" +
                "            </tr>";
            index++;
        }
        $("#mxTbdy").append(str)
        layui.use(['form'], function () {
            var form = layui.form;
            form.render();
        });
    }
    function removetr(e) {
        $(e).parent().parent().remove()
    }
    function delMx(id='',e) {
        if (id==''){
            layer.msg('请选择数据')
            return;
        }
        $.ajax({
            url:"{:url('removeMx')}",
            type:'post',
            dataType:'json',
            data:{id:id},
            success:function (res) {
                if (res.code!=0){
                    layer.msg(res.msg)
                }else {
                    removetr(e)
                }
            },
            error(e){
                layer.msg('网络错误，请稍后')
            }
        })
    }
</script>
{/block}
<!-- /脚本 -->